<template>
  <article class="sys-obj-table">
    <!-- <n-form>
      <n-form-item label="权限字段名称">
        <n-input
          v-model:value="queryForm.fieldName"
          placeholder="输入字段名称进行筛选"
          clearable
        ></n-input>
      </n-form-item>
    </n-form> -->
    
    <!-- <n-data-table
      :columns="tableColumns"
      :data="tableData"
      :pagination="pagination"
      @update:page="updatePage"
      @update:page-size="updatePageSize"
    ></n-data-table> -->
    <BasicTable
        :columns="tableColumns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="tableRef"
        :scroll-x="600"
    >
      <template #tableTitle>
        <QueryForm :init-query="initQuery" v-model="queryForm" @submit="reloadTable">
          <template #default="{ queryForm }">
            <n-form-item label="权限字段名称">
              <n-input
                v-model:value="queryForm['fieldName']"
                placeholder="输入字段名称进行筛选"
                clearable
              ></n-input>
            </n-form-item>
          </template>
        </QueryForm>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>
  </article>
</template>

<script lang="ts" setup>
import { h, ref, watch } from 'vue';
import { BasicTable, QueryForm } from 'slash-admin'
import { NSelect } from 'naive-ui';
import httpApi from "../../httpApi";

const props = defineProps({
  queryFormValue: {
    type: Object,
    default: () => ({})
  }
})
// const fieldName = ref('');
const permissionOptions = [
  {
    label: '权限1',
    value: 'qx1'
  },
  {
    label: '权限2',
    value: 'qx2'
  },
  {
    label: '权限3',
    value: 'qx3'
  }
]
const tableColumns = ref([
  {
    title: '字段',
    key: 'fieldName',
    sorter: 'fieldName',
    width: 150,
  },
  {
    title: '字段中文名',
    key: 'fieldChinese',
    sorter: 'fieldChinese',
    width: 150,
  },
  {
    title: '权限',
    key: 'fieldPermission',
    width: 200,
    render: (row: any) => {
      return h(NSelect, {
        value: row.fieldPermission,
        options: permissionOptions,
        clearable: true,
        placeholder: '选择字段权限',
        style: {
          width: '200px'
        }
      })
    }
  }
])
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 5,
  itemCount: 0,
  showSizePicker: true,
  showQuickJumper: true,
})
const tableRef = ref()
const initQuery = ref({})
const queryForm = ref({
  fieldName: null
})
queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
const loadDataTable = async (res) => {
  console.log("表单参数:{}", queryForm.value);
  return await httpApi.selectSecurityObjFieldPageList({
    searchKey: null,
    ...res,
    ...queryForm.value
  });
};
function reloadTable() {
  if (tableRef.value) {
    tableRef.value.reload();
  }
}

watch(props.queryFormValue, () => {
  queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
  console.log("更新完成")
});

defineExpose({
  tableRef,
  reloadTable
})
</script>

<style lang="less" scoped>
</style>